<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="ruleForm.goodsName" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="价格（元）" prop="price">
                <el-input type="number" v-model="ruleForm.price" suffix-icon="el-icon-coin" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-input v-model="ruleForm.unit" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="店铺名称" prop="shop_name">
                <el-input v-model="ruleForm.shop_name" class="input" :disabled="isDisabled"></el-input>
            </el-form-item>
            <el-form-item label="商品缩略图" class="is-required">
                <el-upload
                        class="avatar-uploader"
                        action="https://yx.tfnhg.com/oss_upload"
                        :show-file-list="false"
                        :on-success="headSuccess"
                        :on-error="headError"
                        :disabled="isDisabled">
                    <img v-if="ruleForm.headImgUrl" :src="ruleForm.headImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>注：建议上传220px*220px</span>
            </el-form-item>
            <el-form-item label="商品展示图" class="is-required">
                <el-upload
                        action="https://yx.tfnhg.com/oss_upload"
                        list-type="picture-card"
                        :limit="imgLimit"
                        :file-list="ruleForm.bannerImgList"
                        :multiple="true"
                        :on-success="bannerSuccess"
                        :on-preview="bannerPreview"
                        :on-remove="bannerRemove"
                        :on-exceed="bannerExceed"
                        :on-error="bannerError"
                        :disabled="isDisabled">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="bannerVisible">
                    <img width="100%" :src="bannerImageUrl" alt="">
                </el-dialog>
                <span>注：建议上传750px*750px；最多可上传五张</span>
            </el-form-item>
            <el-form-item label="商品详情图" class="is-required">
                <el-upload
                        action="https://yx.tfnhg.com/oss_upload"
                        list-type="picture-card"
                        :file-list="ruleForm.contentImgList"
                        :multiple="true"
                        :on-success="contentSuccess"
                        :on-preview="contentPreview"
                        :on-remove="contentRemove"
                        :on-error="contentError"
                        :disabled="isDisabled">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="contentVisible">
                    <img width="100%" :src="contentImageUrl" alt="">
                </el-dialog>
                <span>注：建议上传宽度为750px的图片</span>
            </el-form-item>
            <el-form-item>
                <el-button @click="acceptStatus(2)" type="success" v-if="isCheck">同意</el-button>
                <el-button @click="acceptStatus(3)" type="warning" v-if="isCheck">拒绝</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        name: "fxGoodsDetail",
        components: {breadcrumb},
        data(){
            return{
                goodsAttr:'',//输入属性名称时绑定的值
                attr_list:[],//上传的商品属性格式
                goodsAttrList:[],//商品属性列表
                attrImgUploadIndex:'',//属性图片上传index
                attrs:[],
                routerList: [
                    {
                        name: '商品管理',
                        path: ''
                    },
                    {
                        name: '会员商品列表',
                        path: '/fx_goods_list'
                    },
                    {
                        name: '商品详情',
                        path: ''
                    }
                ],
                ruleForm: {
                    goodsName: '',
                    price: '',
                    headImgUrl: '',
                    bannerImgList: [],
                    contentImgList: [],
                    unit:'',
                    shop_name:''
                },
                rules: {
                    goodsName: [
                        { required: true, message: '请输入商品标题', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入商品价格', trigger: 'blur' },
                    ],

                    unit:[
                        {required: true, message: '请输入商品单位', trigger: 'blur' }
                    ],
                    shop_naem:[
                        {required:true,message:"店铺名称",trigger:blur}
                    ]
                },
                bannerImageUrl: '',
                bannerVisible: false,
                contentImageUrl: '',
                contentVisible: false,
                imgLimit: 10,
                mainType: '',
                isDisabled: true,
                goodsId: '',
                isAddAttr:false,
                isCheck:false
            }
        },
        created(){
            let query = this.$route.query;
            console.log(query);
            this.goodsId = query.id;
            this.getGoodsDetails()
            if(query.type == 2){
                this.isCheck = true
            }
        },
        methods: {
            async getGoodsDetails(){
                let res = await this.$Http.getFxGoodsDetails({
                    id:this.goodsId
                })
                console.log(res);
                this.ruleForm.goodsName = res.product_name;
                this.ruleForm.price = res.price;
                this.ruleForm.headImgUrl = res.head_img;
                this.ruleForm.unit = res.unit;
                this.ruleForm.bannerImgList = this.imgArrToObj(res.top_img);
                this.ruleForm.contentImgList = this.imgArrToObj(res.content_img)
                this.ruleForm.shop_name = res.shop_content.shop_name
            },
            //图片array 变 object
            imgArrToObj(arr){
                let newArr = [];
                for(let i in arr){
                    newArr.push({url:arr[i]})
                }
                return newArr
            },
            headSuccess(response, file){
                console.log(response, file)
                this.ruleForm.headImgUrl = response
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            headError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },

            bannerSuccess(response, file, fileList){
                console.log(response, file, fileList)
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.bannerImgList = disposeFile
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            bannerPreview(file){
                console.log(file)
                this.bannerImageUrl = file.response;
                this.bannerVisible = true;
            },
            bannerRemove(file, fileList){
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.bannerImgList = disposeFile
            },
            bannerExceed(files, fileList) {//图片上传超过数量限制
                this.$message.error('上传图片数量不能超过5张!');
                console.log(files,fileList)
            },
            bannerError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            contentSuccess(response, file, fileList){
                console.log(response, file, fileList)
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.contentImgList = disposeFile
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            contentPreview(file){
                console.log(file)
                this.contentImageUrl = file.response;
                this.contentVisible = true;
            },
            contentRemove(file, fileList){
                let disposeFile = this.$util.disposeFile(fileList)
                this.ruleForm.contentImgList = disposeFile
            },
            contentError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            onEditorChange(editor){
                console.log(editor)
            }, // 内容改变事件
            goBack(){
                this.$router.go(-1);
            },
            acceptStatus(status){
                console.log(status);
                let msg = '';
                let type = '';
                if(status == 2){
                    msg = '此操作将通过该商品的审核, 是否继续?'
                    type = 'success'
                }
                if(status == 3){
                    msg = '此操作将拒绝该商品的审核, 是否继续?'
                    type = 'warning'
                }
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: type
                }).then(() => {
                    this.operationGoodsStatus(status)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                });

            },
            async operationGoodsStatus(status){
                let res = await this.$Http.operationFxProductStatus({
                    id:this.goodsId,
                    status:status
                })
                console.log(res);
                if(res.code == 200){
                    let msg = '';
                    let type ='';
                    if(status == 3){
                        msg = '已拒绝该商品的审核!'
                        type = 'warning'
                    }
                    if(status == 2){
                        msg = '已通过该商品的审核!'
                        type = 'success'
                    }
                    this.$message({
                        type: type,
                        message: msg
                    });
                    this.$router.go(-1);
                }
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader-icon01{
        font-size:14px;
        color:#8c939d;
        width:50px;
        height:50px;
        line-height:50px;
        text-align:center
    }
    .avatar01{
        width: 50px;
        height:50px;
        display: block;
    }
    table{
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
        width: 80%;
        margin-bottom: 40px;
        font-size: 14px;
    }
    table td, table th{
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }
    table thead th {
        background-color: #b3d8ff;
        width: 100px;
    }
    table tr:nth-child(odd){
        background: #fff;
    }
    table tr:nth-child(even){
        background: #ecf5ff;
    }
    .demo-ruleForm{
        width: 100%;
        background: white;
        margin-top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
    }
    .input{
        width: 50%
    }
    .add-attr{
        margin-left: 10px;
    }
    .mt{
        margin-top: 5px;
    }
    .box{
        width: 100%;
        height:50px;
        background-color: #3a8ee6;
    }
    /* .quill-editor{
        margin: 0 20px 20px 0;
    } */
</style>
